<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dialog</title>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="module" src="../src/js/button.js"></script>
    <script type="module" src="../src/js/dialog.js"></script>
</head>

<body>
    <jsc-button class='firstBtn'>第一次打开</jsc-button>
    <jsc-button csstype='CANCEL' class='secondBtn'>open second</jsc-button>
    <jsc-button class='firstBtnDisabled' disabled>第一次打开</jsc-button>
    <jsc-button csstype='CANCEL' class='secondBtnDisabled' disabled>open second</jsc-button>
</body>
<script>
    document.querySelector('.firstBtn').addEventListener('click', e => Jsc.showDialog({
        title: 'First Test',
        url: './template/dialogFirst.html'
    }));

    document.querySelector('.firstBtnDisabled').addEventListener('click', e => Jsc.showDialog({
        title: 'First Test',
        url: './template/dialogFirst.html'
    }));

    document.querySelector('.secondBtn').addEventListener('click', e => Jsc.showDialog({
        title: 'Second Test',
        url: './template/dialogSecond.html',
        closeWhenClickedOutside: true
    }));

    document.querySelector('.secondBtnDisabled').addEventListener('click', e => Jsc.showDialog({
        title: 'Second Test',
        url: './template/dialogSecond.html',
        closeWhenClickedOutside: true
    }));
</script>

</html>